<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知我</title>
    <style>
        :root {
            --primary: #2A2F3D;
            --accent: #FF6B6B;
            --text: #2D3748;
            --bg: #F7FAFC;
            --sidebar-width: 250px;
        }

        body {
            font-family: 'Segoe UI', system-ui;
            line-height: 1.6;
            margin: 0;
            background: var(--bg);
            color: var(--text);
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        .sidebar {
            width: var(--sidebar-width);
            background: #2a2f3d;
            padding: 2rem 1rem;
            overflow-y: auto;
            box-sizing: border-box;
            transition: width 0.3s ease;
            position: relative;
        }

        .sidebar.collapsed {
            width: 0;
            padding: 2rem 0;
            background: #2a2f3d;
            overflow: hidden;
        }

        .toggle-btn {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        .sidebar.collapsed ~ .toggle-btn {
            /* 保持位置固定在左上角 */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            z-index: 10;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }



        .sidebar a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 0.8rem 1rem;
            margin: 0.5rem 0;
            border-radius: 6px;
            transition: background 0.3s;
        }

        .sidebar a:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--accent);
        }

        .sidebar.collapsed a {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            color: transparent;
            transition: color 0.3s ease;
        }

        .sidebar.collapsed a:hover {
            color: white;
            position: relative;
            z-index: 20;
            background: var(--primary);
            padding-left: 1rem;
            width: 200px;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
        }

        .sidebar a.active {
            background: var(--accent);
            color: white;
        }

        .content-frame {
            flex: 1;
            border: none;
            height: 100vh;
            width: calc(100% - var(--sidebar-width));
        }

        .sidebar.collapsed+.content-frame {
            width: 100%;
        }

        @media (max-width: 768px) {
            :root {
                --sidebar-width: 200px;
            }
        }
    </style>
</head>

<body>
    <button class="toggle-btn" id="toggleSidebar">——</button>
    <div class="sidebar" id="sidebar">

        <h3 style="color: white; margin-top: 2rem;">个人作品</h3>
        <a href="目录/人生的摄影.html" target="contentFrame" class="active">人生的摄影</a>
        <a href="目录/永远爱自己.html" target="contentFrame">永远爱自己</a>
       
        <a href="目录/作品即自我.html" target="contentFrame">作品即自我</a>
        <a href="目录/逆境更要开心.html" target="contentFrame">逆境更要开心</a>
         <h4 style="color: gray; margin-top: 2rem;">&nbsp; 生命认知</h4>
          <a href="./目录/生命认知/生命的雕刻.html" target="contentFrame">生命的雕刻</a>




        <h3 style="color: white; margin-top: 2rem;">读书会</h3>
        <a href="读书会/人生的智慧.html" target="contentFrame">人生的智慧</a>
        <a href="读书会/尼采哲学每一个不曾起舞的日子都是对生命的辜负.html" target="contentFrame">尼采哲学</a>

    </div>
    <iframe name="contentFrame" class="content-frame" src="目录/人生的摄影.html"></iframe>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggleBtn = document.getElementById('toggleSidebar');
            const sidebar = document.getElementById('sidebar');
            const links = sidebar.querySelectorAll('a');

            toggleBtn.addEventListener('click', function () {
                sidebar.classList.toggle('collapsed');
                this.textContent = sidebar.classList.contains('collapsed') ? '←' : '→';
            });

            // 为所有链接添加点击事件，更新active状态
            links.forEach(link => {
                link.addEventListener('click', function () {
                    links.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>

</html>